<template>
    <el-container class="home-container">
        <!--            头部区域-->
        <el-header>
            <div>
                <img src="../assets/logo.png" alt="图片">
                <span>电商后台管理系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
        <!--            下部区域-->
        <el-container>
            <!--                左侧侧边栏-->
            <el-aside :width="isCollapse?'64px':'200px'">
                <div class="toggle-button" @click="toggleCollapse">|||</div>
                <!--                侧边栏菜单区域
                router：开启路由模式,开启路由后点击菜单会跳转到 :index 属性对应的路由，路由要以 '/' 开头
                collapse： 是否手气菜单
                collapse-transition: 是否要动画效果
                unique-opened : 是否只允许打开一个菜单
                -->
                <el-menu router
                         :collapse="isCollapse"
                         :collapse-transition="false"
                         unique-opened background-color="#333744"
                         text-color="#fff"
                         :default-active="activeMenuValue"
                         active-text-color="#ffd04b">
                    <!--                    一级菜单-->
                    <el-submenu :index="menu1.id + ''" v-for="menu1 in menuList" :key="menu1.id">
                        <!--                        一集菜单的模板区域-->
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{menu1.authName}}</span>
                        </template>
                        <el-menu-item @click="activeMenu('/'+menu2.path)"
                                      :index="'/'+menu2.path" v-for="menu2 in menu1.children" :key="menu2.id">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{menu2.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>

                    <!--                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>-->
                    <!--                    下面的都是示例-->
                    <!--                    <el-submenu index="1">-->
                    <!--                        &lt;!&ndash;                        一集菜单的模板区域&ndash;&gt;-->
                    <!--                        <template slot="title">-->
                    <!--                            &lt;!&ndash;                            图标&ndash;&gt;-->
                    <!--                            <i class="el-icon-location"></i>-->
                    <!--                            &lt;!&ndash;                            文本&ndash;&gt;-->
                    <!--                            <span>废弃1</span>-->
                    <!--                        </template>-->
                    <!--                        <el-menu-item-group>-->
                    <!--                            <template slot="title">废弃2</template>-->
                    <!--                            <el-menu-item index="1-1">废弃3</el-menu-item>-->
                    <!--                            <el-menu-item index="1-2">废弃4</el-menu-item>-->
                    <!--                        </el-menu-item-group>-->
                    <!--                        <el-menu-item-group title="废弃5">-->
                    <!--                            <el-menu-item index="1-3">废弃6</el-menu-item>-->
                    <!--                        </el-menu-item-group>-->
                    <!--                        <el-submenu index="1-4">-->
                    <!--                            <template slot="title">废弃7</template>-->
                    <!--                            <el-menu-item index="1-4-1">废弃8</el-menu-item>-->
                    <!--                        </el-submenu>-->
                    <!--                    </el-submenu>-->
                    <!--                    <el-menu-item index="2">-->
                    <!--                        <i class="el-icon-menu"></i>-->
                    <!--                        <span slot="title">废弃9</span>-->
                    <!--                    </el-menu-item>-->
                    <!--                    <el-menu-item index="3" disabled>-->
                    <!--                        <i class="el-icon-document"></i>-->
                    <!--                        <span slot="title">废弃10</span>-->
                    <!--                    </el-menu-item>-->
                    <!--                    <el-menu-item index="4">-->
                    <!--                        <i class="el-icon-setting"></i>-->
                    <!--                        <span slot="title">废弃11</span>-->
                    <!--                    </el-menu-item>-->
                    <!--                    示例-->


                </el-menu>
            </el-aside>
            <!--                右侧内容主体-->
            <el-main>
                <!--                路由占位符-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
  import router from '../router'

  export default {
    name: 'Home',
    data () {
      return {
        menuList: [
          {
            authName: '',
            children: [],
            id: '',
            order: '',
            path: ''
          }
        ],
        iconsObj: ['el-icon-platform-eleme', 'el-icon-eleme', 'el-icon-delete-solid', 'el-icon-delete', 'el-icon-s-tools', 'el-icon-setting', 'el-icon-user-solid', 'el-icon-user', 'el-icon-phone', 'el-icon-phone-outline', 'el-icon-more', 'el-icon-more-outline', 'el-icon-star-on', 'el-icon-star-off', 'el-icon-s-goods', 'el-icon-goods', 'el-icon-warning'],
        isCollapse: false,
        activeMenuValue: ''
      }
    },
    created () {
      this.initMenuList()
      const sessionActiveMenuValue = window.sessionStorage.getItem('activeMenuValue')
      if (sessionActiveMenuValue != null) {
        this.activeMenuValue = sessionActiveMenuValue
      }
    },
    methods: {
      activeMenu (activeMenuValue) {
        this.activeMenuValue = activeMenuValue
        window.sessionStorage.setItem('activeMenuValue', activeMenuValue)
      },
      toggleCollapse () {
        // 实现单击 菜单的折叠
        this.isCollapse = !this.isCollapse
      },
      logout () {
        // 清空 sessionStorage 的数据
        window.sessionStorage.clear()
        router.push('/login')
      },
      async initMenuList () {
        // 获取所有的菜单
        const { data: res } = await this.$http.get('menus')
        if (res.meta.status !== 200) {
          // 如果不是 200 表示获取失败
          return this.$message.error(res.meta.msg)
        }
        this.menuList = res.data
      }
    }
  }
</script>

<style lang="less" scoped>
    // 在 element 中的组件名字 直接回翻译成 类名
    .el-header {
        background-color: #373d41;
        display: flex;
        justify-content: space-between;
        // 左边距离
        padding-left: 0;
        // header 中的内容居中
        align-items: center;
        color: #FFFFFF;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }

    .el-aside {
        background-color: #333744;

        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }

    .home-container {
        height: 100%;
    }

    .toggle-button {
        background-color: #4a5064;
        font-size: 10px;
        line-height: 24px;
        color: #FFFFFF;
        text-align: center; // 居中
        letter-spacing: 0.2em; //每个字之间的间距
        cursor: pointer; // 鼠标放上去变小手
    }
</style>
